<template>
    <div class="acc-basic">
        <form @submit="()=>{return false;}">
            <div class="page-tit">个人资料</div>
            <div class="up-row">
                <div class="lup">
                    <a class="img-box">
                        <img loading="lazy" :src="info.avatar?info.avatar:defaultAvatar" alt="">
                    </a>
                    <div class="tbox">
                        <div class="name">{{nickname?nickname:'未设置昵称'}}</div>
                        <div class="up-tip">点击头像更换图片，jpg/jepg或png，小于2048k</div>
                    </div>
                </div>
                <el-upload
                :action="aliInfo.host"
                    :show-file-list="false"
                    :data="aliData" accept=".jpg,.png,.gif,.jpeg"
                    :on-success="firstPictureSuccess"
                    :drag="true"
                    :before-upload="firstPictureBefore" class="upload-btn">
                修改头像
                </el-upload>
            </div>
            <div class="dbl-flex-item">
                <div class="form-item">
                    <label>昵称</label>
                    <input type="text" v-model="info.userName" placeholder="输入昵称">
                </div>
                <div class="form-item">
                    <label>地区</label>
                    <!-- <input type="text" placeholder="输入昵称"> -->
                    <el-cascader
                    style="width: 100%;"
                    size="large" class="pro-work-elcascader"
                    :options="options" popper-class="pro-wlrk-elcascader-proper"
                    v-model="selectedOptions"
                    @change="handleChange"
                    placeholder="工作城市"
                    >
                </el-cascader>
                </div>
            </div>
            <div class="form-item">
                <label>签名</label>
                <input type="text" v-model="info.subhead" placeholder="不超过20个汉字或字符">
            </div>
            <div class="form-item">
                <label>简介</label>
                <textarea  v-model="info.intro"></textarea>
            </div>
            <div class="form-item">
                <label>毕业院校</label>
                <input type="text" v-model="info.edu" placeholder="不超过20个汉字或字符">
            </div>
            <div class="dbl-flex-item">
                <div class="form-item">
                    <label>QQ</label>
                    <input type="text" v-model="info.qq" placeholder="请输入">
                </div>
                <div class="form-item">
                    <label>微信</label>
                    <input type="text" v-model="info.weixin" placeholder="请输入">
                </div>
            </div>
            <div class="form-item">
                <label>新浪微博</label>
                <input type="text" v-model="info.weiboUrl" placeholder="请输入">
            </div>
            <div class="form-item">
                <label>behance</label>
                <input type="text" v-model="info.behanceUrl" placeholder="请输入">
            </div>
            <div class="form-item">
                <label>dribbble</label>
                <input type="text" v-model="info.dribbbleUrl" placeholder="请输入">
            </div>
            <div class="form-item">
                <label>个人网站</label>
                <input type="text" v-model="info.url" placeholder="请输入">
            </div>
            <div class="other-form-item">
                <label>技能专长/专业领域 <i class="smalltip">添加技能标签，可以使您的作品被更多的用户发现(最多5个)</i></label>
                <div class="tag-control">
                    <div class="inp-tags">
                        <a class="tag" v-for="(item, i) in info.tags" :key="i">{{item}}<i class="del-tag" @click="info.tags.splice(i,1)"></i></a>
                    </div>
                    <input type="text" v-model="inputValue" maxlength="8" placeholder="每个标签最多8个字符，按回车添加标签" @keyup="handleInputConfirm"><i class="num">还可以创建{{5-info.tags.length}}个标签</i>
                </div>
            </div>
            <div class="fot-btn">
                <a class="save" @click="handleSave">保存</a>
            </div>
        </form>
    </div>
</template>

<script>
import { regionData,provinceAndCityData, CodeToText,TextToCode } from "element-china-area-data";
import api from '@/api/api'
export default {
    data(){
        return {
            nickname:'',
			options: regionData,
            selectedOptions:[],
            inputValue:'',
            defaultAvatar: require('../../assets/pro/default_uimg.svg'),
            info:{
                tags:[]
            },
            isuploadSucc:false,
            tempAvatar:'',
            aliInfo:{
                host:''
            },
            aliData:{}
        }
    },
    methods:{
        handleChange() {
            var loc = "";
            let that = this
            for (let i = 0; i < this.selectedOptions.length; i++) {
                loc += CodeToText[this.selectedOptions[i]];
                if(i == 0){
                    that.info.province = CodeToText[this.selectedOptions[i]]
                }
                if(i == 1){
                    that.info.city = CodeToText[this.selectedOptions[i]]
                }
                if(i == 2){
                    that.info.area = CodeToText[this.selectedOptions[i]]
                }
            }
        },
        async handleSave(){
            let _data=JSON.parse(JSON.stringify(this.info));
            _data.tags=_data.tags.join(',');
            delete _data.selfTeamList;
            delete _data.articles;
            delete _data.tagsList;
            delete _data.recommendTags;
            delete _data.pageNum;
            delete _data.pageSize;
            delete _data.orderByColumn;
            delete _data.totalSee;
            delete _data.totalFans;
            delete _data.totalSubscribe;
            delete _data.totalComment;
            delete _data.totalPraise;
            delete _data.params;
            delete _data.createTime;
            delete _data.searchValue;
            delete _data.createBy;
            delete _data.createTime;
            delete _data.updateBy;
            delete _data.updateTime;
            delete _data.isAsc;
            delete _data.loginName;
            delete _data.password;
            delete _data.salt;
            delete _data.status;
            delete _data.loginIp;
            delete _data.loginDate;
            delete _data.sortVideoNum;
            delete _data.avatarDel;
            delete _data.rank;
            delete _data.noteEnable;

            for(let p in _data){
                if(!_data[p]||_data[p]=='null'){
                    _data[p]='';
                }
            }

            if(!_data.province||_data.province=='null'){
                _data.province='';
            }
            if(!_data.city||_data.city=='null'){
                _data.city='';
            }
            if(!_data.area||_data.area=='null'){
                _data.area='';
            }
            let res=await api.editUserInfo(_data);
            if(res.code==0){
                this.nickname=_data.userName;
                let sform=JSON.parse(decodeURIComponent(localStorage.getItem('BSIC')));
                sform.userName=_data.userName;
                sform.avatar=_data.avatar;
                sform.subhead=_data.subhead;
                this.$parent.$parent.$refs['gHeader'].userInfo=sform;
                localStorage.setItem('BSIC', encodeURIComponent(JSON.stringify(sform)));
                this.userName=_data.userName;
                this.$amessage.success('保存成功');

                if(localStorage.getItem('I-THD-TK')){
                    localStorage.setItem('I-THD-TK-SVED',true);
                    let routeData=this.$router.resolve({ path:'/user/'+sform.id});
                    window.open(routeData.href, '_self');
                }
            }
        },
        handleInputConfirm(e) {
            let _value = e.target.value;
            if (!_value || !_value.replace(/\s+/g, "")) {
                e.target.value = "";
                return;
            }
            if (e.key == "Enter") {
                if (this.info.tags.length >= 5) {
                    this.$amessage.warn("最多可添加5个标签！");
                    
                    this.inputValue='';
                    return;
                }
                
                this.info.tags.push(_value);
                this.inputValue='';
            }
        },
        firstPictureSuccess(err, file, fileList) {
            debugger
            this.isuploadSucc=true;
            this.info.avatar=this.tempAvatar;
            this.$amessage.success('上传成功')
        },
        /* 封面上传 */
        firstPictureBefore(file) {
            var isImage = file.type === "image/jpg";

            if (!isImage) isImage = file.type === "image/jpeg";
            if (!isImage) isImage = file.type === "image/png";
            if (!isImage) isImage = file.type === "image/gif";

            const sizeFalg = file.size / 1024 / 1024 <=2;
            if (!isImage) {
                this.$amessage.warn("封面只能是[JPG,PNG,GIF]格式!");
                return false;
            }
            if (!sizeFalg) {
                this.$amessage.warn("封面大小不能超过 2MB!");
                return false;
            }
            this.isuploadSucc=false;
            this.aliData.key = this.aliInfo.dir + "/" + new Date().getTime() + file.name;
            this.tempAvatar=this.$savePublishAlihost+'/'+this.aliData.key;
            return true;
        },
    },
    async mounted(){
        this.options.forEach(f=>{
            if(f.children){
                f.children.forEach(s=>{
                    if(s.label=='市辖区'){
                        f.children=s.children;
                    }
                })
            }
        })
        
        let res=await api.getImgPoc();

        this.aliInfo = res.data;
        
        res=await api.getUserInfo();
        if(res.data){
            this.nickname=res.data.userName;
            if(res.data.tags)
                res.data.tags=res.data.tags.split(',');
            else
                res.data.tags=[];
            this.info=res.data;

            let that=this;
            let defaultOptions=[];
            if(res.data.province&&res.data.province!='null'){
                
                defaultOptions.push(TextToCode[res.data.province].code)
            }
            if(res.data.city&&res.data.city!='null'){
                
                if(TextToCode[res.data.province][res.data.city]){
                    defaultOptions.push(TextToCode[res.data.province][res.data.city].code)
                }
            }
            if(res.data.area&&res.data.area!='null'){
                
                if(TextToCode[res.data.province][res.data.city][res.data.area]){
                    defaultOptions.push(TextToCode[res.data.province][res.data.city][res.data.area].code)
                }
            }
            that.$nextTick(()=>{
                that.selectedOptions=defaultOptions;
            })
        }
    }
}
</script>

<style lang="less">
.acc-basic{
    .page-tit{
        font-size:16px;
        font-weight:500;
        line-height:22px;
        margin-bottom:22px;
    }
    .up-row{
        display: flex;
        align-items: center;
        margin-bottom:40px;
        justify-content: space-between;
        .lup{
            display: flex;
            align-items: center;
        }
        .img-box{
            margin-right:16px;
            img{
                width:80px;height:80px;
                object-fit: cover;
                border-radius:80px;
            }
        }
        .tbox{
            .name{
                font-size:16px;
                font-weight:500;
            }
            .up-tip{
                font-size:12px;
                color:#969696;
                margin-top:14px;
            }
        }
        .upload-btn{
            line-height:40px;
            height:40px;
            width:90px;
            text-align: center;
            border-radius:8px;
            background:#29272F;
            font-size:14px;
            font-weight:500;
            position: relative;
            &:hover{
                background:#323232;
                .el-upload-dragger{
                    background:#323232 !important;
                }
            }
            .el-upload{
                width:100%;
                .el-upload-dragger{
                    width:100%;
                    height:100%;
                    background:#29272F;
                    border:none;color:#fff !important;
                    transition:.2s all linear;
                }
            }
        }
    }
    .dbl-flex-item{
        display: flex;
        align-items: center;
        >.form-item{
            width:100%;
            &:first-child{
                margin-right:34px;
            }
        }
    }
    .form-item{
        margin-bottom:20px;
        ::v-deep{
            .pro-work-elcascader{
                line-height: 40px;
                input{
                    background:#23232A;
                    border-radius:8px;
                    height:40px !important;
                    line-height:40px !important;
                    &::-webkit-input-placeholder{
                        color:#fff !important;
                    }
                }
                .el-input__suffix .el-input__suffix-inner .el-icon-arrow-down{
                    color:#b9b9b9 !important;
                }
                .is-focus{
                    input{
                        border:1px solid #11CCB1 !important;
                    }
                }
            }
        }
        label{
            display: block;
            margin-bottom:10px;
            line-height:20px;
            font-size:14px;
        }
        input[type="text"]{
            background:#23232A;
            border:none;
            font-size:14px;
            padding-left:12px;
            height:40px;
            border-radius:8px;
            width:100%;
            color:#fff;
        }
        textarea{
            height:90px;
            padding:10px;
            background:#23232A;
            resize:none;
            border:none;
            font-size:14px;
            width:100%;
            color:#fff;
            border-radius:8px;
            font-size:14px;
        }
    }
    .other-form-item{
        margin-top:50px;
        label{
            display: block;
            margin-bottom:10px;
            line-height:20px;
            font-size:14px;
            .smalltip{
                font-size:12px;
                color:#969696;
                font-style: normal;
                margin-left:16px;
            }
        }
        .tag-control{
            height:40px;
            border-radius:8px;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding-left:5px;
            background:#23232A;
            margin-bottom:15px;
            position: relative;
            .inp-tags{
                display: flex;
                align-items: center;
                .tag{
                    line-height:30px;
                    padding-left:15px;
                    margin-right:5px;
                    padding-right:12px;
                    border-radius:30px;
                    white-space:nowrap;
                    background:#33333C;
                    height:100%;
                    display: inline-block;
                    font-size:14px;
                    .del-tag{
                        width:10px;height:10px;
                        background:url('../../assets/pro/del_tag_ico.svg') no-repeat;
                        background-size:cover;
                        display: inline-block;
                        margin-left:11px;
                        opacity:.8;
                        &:hover{
                            opacity:1;
                        }
                    }
                }
            }
            input{
                background:#23232A;
                color: #fff;
                font-size:14px;
                width:100%;
                padding-left:13px;
                border:none;
            }
            .num{
                font-style: normal;
                font-size:14px;
                color:#6A6A80;
                position: absolute;
                right:0px !important;
                top:10px;z-index:11;
                background: #23232A;
                padding-left: 10px;
                padding-right:10px;
            }
        }
    }
    .fot-btn{
        text-align: right;
        margin-top:20px;
        .save{
            color:#fff;
            background:#11CCB1;
            line-height:40px;
            width:100px;
            text-align: center;
            display: inline-block;
            font-size:16px;
            font-weight:500;
            border-radius:8px;
            transition:.2s all linear;
            &:hover{
                background: #0fab94;
            }
        }
    }
}


































































































</style>